import { Component } from "react";
import { SearchOutlined } from "@ant-design/icons";
import { Row, Col, Modal, Input, Card, Checkbox, Tree } from "antd";
import { getfindFilesBuildList } from "../../../ServeApi";
import { AjaxData } from "../../../../../../data/interface/publicInterface";

import "./index.less";
import { formattingTreeSelectTreeData } from "../../../../../../utils/common";

export interface DepartmentMessageProps {
  onSelect: (sele: string[]) => any;
}

export interface DepartmentMessageState {}

class DepartmentMessage extends Component<
  DepartmentMessageProps,
  DepartmentMessageState
> {
  public checkedKeys: string[] = [];
  private treeSelectData: any[] = [];
  private isCascade: boolean = false; //是否级联
  private isSelectAll: boolean = false; //是否全选
  private selectAllArr: string[] = []; //全选所需的id
  private ipv: string = "";
  render() {
    return (
      <>
        <Card title="建筑信息" className="DepartmentMessage">
          <div className="box">
            <Row>
              <Col span={24}>
                <Checkbox
                  checked={this.isSelectAll}
                  onChange={(e) => {
                    this.isSelectAll = e.target.checked;
                    if (e.target.checked) {
                      this.checkedKeys = this.selectAllArr;
                    } else {
                      this.checkedKeys = [];
                    }
                    this.props.onSelect(this.checkedKeys);
                    this.forceUpdate();
                  }}
                >
                  全选
                </Checkbox>
                <Checkbox
                  checked={this.isCascade}
                  onChange={(e) => {
                    this.isCascade = e.target.checked;
                    this.checkedKeys = []; //清空
                    this.isSelectAll = false;
                    this.props.onSelect(this.checkedKeys);
                    this.forceUpdate();
                  }}
                >
                  是否级联
                </Checkbox>
              </Col>
              <Col span={24}>
                <Input
                  placeholder="请输入关键字过滤"
                  value={this.ipv}
                  onChange={(e) => {
                    this.ipv = e.target.value;
                    this.forceUpdate();
                  }}
                  suffix={
                    <SearchOutlined
                      onClick={() => {
                        this.getSelectList(this.ipv);
                      }}
                    />
                  }
                />
              </Col>
            </Row>
            {this.treeSelectData.length > 0 ? (
              <Tree
                checkable
                defaultExpandAll
                checkedKeys={this.checkedKeys}
                // onSelect={this.onSelect}
                onCheck={this.onCheck}
                treeData={this.treeSelectData}
                checkStrictly={!this.isCascade}
              />
            ) : null}
          </div>
        </Card>
      </>
    );
  }

  /**主动触发 */
  //树选择
  onCheck = (checkedKeys: any) => {
    if (!this.isCascade) {
      //不级联
      this.checkedKeys = checkedKeys["checked"];
    } else {
      //级联
      this.checkedKeys = checkedKeys;
    }
    this.props.onSelect(this.checkedKeys);
    this.forceUpdate();
  };
  componentWillMount() {
    this.getSelectList();
  }
  /**方法函数调用 */
  //格式化树状选择数据
  getTreeData(arr: any[]) {
    let selectAllArr: string[] = [];
    let array = arr.map((item) => {
      selectAllArr.push("" + item.id);
      return {
        key: "" + item.id,
        id: item.id,
        pId: item.parentId,
        value: "" + item.id,
        title: item.name,
      };
    });
    this.selectAllArr = selectAllArr;
    this.treeSelectData = formattingTreeSelectTreeData(array);

    this.forceUpdate();
  }
  /**请求数据 */
  //获取建筑选择项
  async getSelectList(str?: string) {
    let _this = this;
    let pream = {
      name: str ? str : "",
    };
    try {
      let res: any = await getfindFilesBuildList(JSON.stringify(pream)).catch(
        (err) => {
          _this.setState({ loading: false });
        }
      );
      let json: AjaxData = res;
      if (json.success) {
        _this.getTreeData(json.data);
        _this.checkedKeys = [];
        _this.props.onSelect(_this.checkedKeys);
        _this.setState({ loading: false });
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
}

export default DepartmentMessage;
